<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>确认订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/common/mui.min.css">
	<link rel="stylesheet" href="../css/common/mui.extra.css">
	<link rel="stylesheet" href="../css/common/mui.picker.min.css">
	<link rel="stylesheet" href="../css/common/share.css">
	<link rel="stylesheet" href="../css/common/common.css">
	<style>
		.mui-input-group:before,
		.mui-input-group:after,
		.mui-input-group .mui-input-row:after,
		.mui-table-view:before,
		.mui-table-view:after {
			background: none !important;
		}

		.mui-input-row label {
			width: 35% !important;
		}

		 ::-moz-placeholder {
			color: rgb(200, 200, 200);
		}

		 ::-webkit-input-placeholder {
			color: rgb(200, 200, 200);
		}

		 :-ms-input-placeholder {
			color: rgb(200, 200, 200);
		}

		.cj-min-title {
			height: 30px !important;
			line-height: 30px !important;
			font-size: 12px;
			padding-left: 15px;
			font-weight: bold;
			color: #666;
		}

		.mui-input-row label {
			font-size: 14px;
			width: 30% !important;
		}

		.mui-input-row input {
			width: 65% !important;
			font-size: 14px;
		}

		.mui-table-view .mui-media-object {
			line-height: normal;
			max-width: 100px;
			height: 60px;
		}

		.cj-coupon-price {
			font-size: 24px;
			line-height: 40px;
			text-align: center;
			color: #dd524d;
		}

		.cj-coupon-price span {
			font-size: 14px;
		}

		.cj-coupon-price-full {
			font-size: 12px;
			color: #8f8f94;
		}
	</style>
</head>

<body class="cj-bg-light-grey">
	<div id="orderPage">
		<header class="mui-bar mui-bar-nav mui-white-nav-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">确认订单</h1>
		</header>
		<div class="cj-line-20"></div>
		<div class="cj-line-20"></div>
		<form method="get" action="/orders/pay">
			<div class="mui-content-padded">
				<div id='login-form' class="mui-input-group">
					<div class="mui-input-row cj-min-title">
						选择使用时间
					</div>
					<div class="mui-input-row">
						<label>活动时间</label>
						<input name="activityTime" style="width:65%;text-align:left;color:#999;font-size:14px;border: 1px solid #fff;color:#999;padding-left:0px;" id='datePicker' value="选择时间" class="btn mui-btn mui-btn-block" />
					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<div id='login-form' class="mui-input-group">
					<div class="mui-input-row cj-min-title">
						填写联系人信息
					</div>
					<div class="mui-input-row">
						<label>联系姓名</label>
						<input type="text" name="contactUser" class=" mui-input-clear" placeholder="必填">
					</div>
					<div class="mui-input-row">
						<label>联系手机</label>
						<input type="text" name="contactPhone" class=" mui-input-clear" placeholder="必填">
					</div>
				</div>
			</div>

			<div class="mui-input-row mui-content-padded">
				<textarea id="textarea" name="contactNotes" style="border: 1px solid #fff;font-size:14px;" rows="5" placeholder="留言备注"></textarea>
			</div>
			<div class="mui-content-padded">
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label>优惠劵</label>
						<div id="checkCoupon" style="float:right;height:40px;line-height:40px;font-size:14px;color:#999;text-align:right;padding-right:10px;">查看可用优惠劵</div>
					</div>
				</div>
			</div>

			<div class="mui-content-padded">
				<div class="mui-input-group">
					<div class="mui-row">
						<div class="mui-col-sm-2 mui-col-xs-2">
							<img src="../img/zfb-pay.png" style="width:30px;height:30px;margin-top:5px;margin-left:10px;" />
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3" style="height:40px;line-height:40px;font-size:14px;">
							支付宝支付
						</div>
						<div class="mui-col-sm-7 mui-col-xs-7" style="height:40px;line-height:40px;font-size:14px;">
							<div class="mui-radio">
								<label></label>
								<input name="payWay" value="0" checked type="radio" />
							</div>
						</div>
					</div>
				</div>
				<div class="mui-input-group">
					<div class="mui-row">
						<div class="mui-col-sm-2 mui-col-xs-2">
							<img src="../img/wechat-pay.png" style="width:30px;height:30px;margin-top:5px;margin-left:10px;" />
						</div>
						<div class="mui-col-sm-3 mui-col-xs-3" style="height:40px;line-height:40px;font-size:14px;">
							微信支付
						</div>
						<div class="mui-col-sm-7 mui-col-xs-7" style="height:40px;line-height:40px;font-size:14px;">
							<div class="mui-radio">
								<label></label>
								<input name="payWay" value="1" type="radio" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="ordersInput">
			</div>
			<div style="height:100px;"></div>
			<nav class="mui-bar mui-bar-tab cj-bg-white  cj-none-border cj-padded-0" style="-webkit-box-shadow:none;">
				<div class="mui-row">
					<div class="mui-col-sm-6 mui-col-xs-6 mui-bar-div">
						<span class="mui-tab-label">实付款:￥<span id="totalPrice" class="cj-text-color-danger">0.00</span></span>
					</div>
					<div class="mui-col-sm-6 mui-col-xs-6">
						<button style="top:0;" type="button" id="submit1" class="mui-btn-primary mui-btn-block ">立即下单</button>
					</div>
				</div>
			</nav>
		</form>
	</div>

	<div id="couponPage" style="display:none;">
		<header class="mui-bar mui-bar-nav mui-white-nav-bar">
			<span id="closeCoupon" class=" mui-icon mui-icon-closeempty mui-pull-left"></span>
			<h1 class="mui-title">可用优惠劵</h1>
			<button class="mui-btn mui-btn mui-btn-link mui-pull-right" id="comfirmCoupon">确定</button>
		</header>
		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron" id="couponList">
							
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="payPage" style="display:none;text-align:center;">
		<div style="margin-top:200px;">
			<p>如果您已经完成支付，请点击完成支付</p>
			<div class="mui-btn mui-btn-primary" style="width:40%;">支付完成</div>
		</div>
		<div>
			<div class="mui-btn mui-btn" style="margin-top:10px;width:40%;">取消支付</div>
		</div>

		<div id="cover"></div>
		<div id="guide"><img src="/img/paybg.png"></div>
		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		</div>
		<script type="text/html" id="couponTpl">
			<% for(var i=0;i<result.length;i++){%>
				<li class="mui-table-view-cell mui-media" style="padding-right:0px;">
					<a href="#" style="width:100%;display:inline-block;">
						<div class="mui-media-object mui-pull-left">
							<div class="cj-coupon-price">
								<span>￥</span>
								<%==result[i].favourablePrice%>
							</div>
							<span class="cj-coupon-price-full">满<%==result[i].amountNeed%>可用</span>
						</div>
						<div class="mui-media-body">
							<span style="font-size:15px"><%==result[i].cName%></span>
							<p class='mui-ellipsis'>
								使用范围:
								<%==result[i].type%>
							</p>
							<p class='mui-ellipsis'>
								<%==result[i].startTime%>-
									<%==result[i].endTime%>
							</p>
						</div>
					</a>
					<a href="#" style="display:inline-block;margin-left:20px;height:70px;">
						<div class="mui-radio">
							<label></label>
							<input name="<%==result[i].productType%>" value="<%==result[i].cpid%>" data-price="<%==result[i].favourablePrice%>" class="select-coupon" type="radio">
						</div>
					</a>
				</li>
				<%}%>
		</script>
		<script src="../js/common/template-web.js"></script>
		<script src="../js/common/mui.min.js"></script>
		<script src="../js/common/mui.href.js"></script>
		<script src="../js/common/mui.picker.min.js"></script>
		<script src="../js/common/jquery.min.js"></script>
		<script src="../js/common/common.js"></script>
		<script src="../js/common/share.js"></script>
		<script src="../js/orders/meal.js"></script>
</body>

</html>
